<!-- 角色编辑弹窗 -->
<template>
  <div>
    <el-drawer :visible="drawerEditBoolenss"
               :before-close="handleClose"
               size="50%"
               ref="drawer">
      <template v-slot:title>
        <span class="hLabel">{{ isUpdate ? '佣金记录' : '佣金记录' }}</span>
      </template>
      <div class="ele-body">
        <el-card shadow="never">
          <div class="flex-column-between height83">
            <ele-pro-table ref="table"
                           :columns="columns"
                           :datasource="datasource"
                           cache-key="systemUserTable">
              <!-- 表头工具栏 -->
              <template v-slot:toolbar> </template>
              <!-- 用户名列 -->
              <!-- 状态列 -->
              <template v-slot:status="{ row }">
                <el-switch :active-value="1"
                           :inactive-value="0"
                           v-model="row.status"
                           @change="editStatus(row)" />
              </template>
              <template v-slot:num="{ row }">
                <div style="color: #1890ff"
                     v-if="row.type == 1||row.type == 2||row.type == 4">
                  +{{ row.amount }}
                </div>
                <div style="color: red"
                     v-if="row.type == 3||row.type == 5">
                  -{{ row.amount }}
                </div>
              </template>
              <template v-slot:mode_type="{ row }">
                <div>
                  {{ operateTypeFn(row.operate_type) }}
                </div>
              </template>
              <template v-slot:level="{ row }">
                <div>
                  {{ row.level==1?'直推粉丝':'间推粉丝' }}
                </div>
              </template>
              <template v-slot:pay_method="{ row }">
                <div>
                  {{ payFn(row.pay_method ) }}
                </div>
              </template>
              <template v-slot:type="{ row }">
                <div>
                  {{ commissionStatusFn(row.type ) }}
                </div>
              </template>
              <template v-slot:pay_type="{ row }">
                <div>
                  {{ payTypeFn(row.pay_type ) }}
                </div>
              </template>
            </ele-pro-table>
            <div class="drawer__footer">
              <el-button round
                         type="plain"
                         @click="handleClose()"
                         size="medium">返回</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </el-drawer>
    <!-- 图片预览 -->
    <el-image-viewer v-if="viewerVisible"
                     style="z-index: 9999"
                     :on-close="closeViewer"
                     :url-list="imgViewArr" />
  </div>
</template>
  
  <script>
import { commission } from '@/api/user/user';
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';

import { upload } from '@/api/saveImg/index';
import { editClassify, addClassify } from '@/api/classifyList/index';
export default {
  name: 'pictureEdit',
  components: { ElImageViewer },
  props: {
    drawerEditBoolenss: {
      type: Boolean,
      default: true
    },
    // 修改回显的数据
    data: Object
  },
  data () {
    const categoryImage = (rule, value, callback) => {
      console.log(this.form.img);
      if (!this.form.img) {
        callback(new Error('请上传图片'));
      } else {
        callback();
      }
    };
    const DEFAULT_FORM = {};
    return {
      storageMode: 2,
      options: [],
      imageUrl: '',
      imgViewArr: [],
      viewerVisible: false,
      // 表单数据
      form: { ...DEFAULT_FORM },
      dialogImageUrl: '',
      fileList: [],
      dialogVisible: false,
      // 表单验证规则
      rules: {
        name: [
          {
            required: true,
            message: '请输入分类名称',
            trigger: 'blur'
          }
        ],

        sort: [
          {
            required: true,
            message: '请输入排序值',
            trigger: 'blur'
          }
        ],
        // 站点 图片上传
        img: [{ required: true, validator: categoryImage, trigger: 'change' }]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      showChoose: false,
      columns: [
        {
          columnKey: 'index',
          type: 'index',
          width: 45,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },

        {
          prop: 'num',
          label: '获得佣金',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110,
          slot: 'num'
        },
        {
          prop: 'level',
          label: '粉丝类型',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110,
          slot: 'level'
        },
        {
          prop: 'type',
          label: '佣金操作',
          align: 'center',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 110,
          slot: 'type'
        },

        {
          prop: 'create_time',
          label: '创建时间',
          sortable: 'custom',
          showOverflowTooltip: false,
          minWidth: 110,
          formatter: (_row, _column, cellValue) => {
            return this.$util.toDateString(cellValue);
          }
        }
      ]
    };
  },

  methods: {
    /* 表格数据源 */
    datasource ({ page, limit }) {
      return commission({ id: this.form.id, page, limit });
    },
    /* 刷新表格 */
    reload () {
      this.$refs.table.reload({ page: 1 });
    },
    // 获取存储配置
    // async storageConfig () {
    //   const res = await storageConfigDetail();

    //   // console.log(res.storageMode);

    //   this.storageMode = res?.storageMode;
    // },
    // 关闭查看器
    closeViewer () {
      this.viewerVisible = false;
    },
    // 下载图片
    handleDownload (file) {
      window.open(file.url);
    },
    // 删除图片
    handleRemove () {
      this.fileList = [];
      this.imageUrl = '';
    },
    //  图片上传个数超过限制
    exceedFn () {
      this.$message({
        message: '图片上传已达到上限,请删除后再上传',
        type: 'warning'
      });
    },
    // 关闭抽屉
    handleClose () {
      console.log('查看详情');
      this.$emit('update:drawerEditBoolenss', false);
    },
    async handleFileChange (file) {
      this.aliFn(file);
    },
    // 阿里云
    async aliFn (file) {
      this.loading = true;

      let files = file.raw;

      console.log(files);
      // 构建请求参数
      let params = new FormData();
      console.log(params);

      //   params.append('signature', '132321313');
      params.append('file', files);
      console.log(params);

      //   let config = {
      //     headers: {
      //       'Access-Control-Allow-Origin': '*',
      //       'x-oss-callback-Authorization': getToken()
      //     }
      //   };

      const res = await upload(params);
      //   let result = await axios.post(res.host, param, config);
      //   let url = res.host + '/' + date + suffix;
      console.log(res);
      if (res.code == 0) {
        this.form.img = res.data.url;
        this.loading = false;
      }
      //   this.form.categoryImages = url;
      //   this.imageUrl = url;
      //   this.loading = false;
    },

    /* 保存编辑 */
    save () {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return false;
        }
        // if (this.isUpdate) {
        //   this.form.img = this.imageUrl;
        // }
        const data = {
          ...this.form
        };
        console.log(data);
        this.loading = true;

        const saveOrUpdate = this.isUpdate ? editClassify : addClassify;
        saveOrUpdate(data)
          .then((msg) => {
            console.log(msg);
            this.loading = false;
            this.$message.success(msg.message);

            this.handleClose();
            this.$emit('done');
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      });
    }
    /* 更新visible */
  },
  computed: {
    commissionStatusFn: function () {
      return function (status) {

        let orderStatus = '';
        // status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
        orderStatus =
          status == 1 ? '商城购买商品' : status == 2 ? '购买套餐卡' : status == 3 ? '提现' : status == 4 ?
            '手动添加' : '手动扣除';

        return orderStatus;
      };
    },

    payTypeFn: function () {
      return function (status) {
        let orderStatus = '';
        // status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
        orderStatus =
          status == 0
            ? '线上'
            : status == 1
              ? '线上扫码'
              : status == 2
                ? '线下扣款'
                : status == 3
                  ? '在线充值'
                  : '余额'
        return orderStatus;
      };
    },
    payFn: function () {
      return function (status) {
        let orderStatus = '';
        // status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
        orderStatus =
          status == 0
            ? '微信'
            : status == 1
              ? '微信'
              : status == 2
                ? '支付宝'
                : status == 3
                  ? '现金'
                  : status == 4
                    ? '余额'
                    : 'pos机';
        return orderStatus;
      };
    },
    changeFn: function () {
      return function (status) {
        let orderStatus = '';
        // status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
        orderStatus =
          status == 0
            ? '支付'
            : status == 1
              ? '支付'
              : status == 2
                ? '提现'
                : status == 3
                  ? '退款'
                  : '手动';
        return orderStatus;
      };
    },
    operateTypeFn: function () {
      return function (status) {
        let orderStatus = '';
        // status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
        // orderStatus =
        //   status == 1 ? '余额充值' : status == 2 ? '购买商品' : '购买套餐 ';

        orderStatus =
          status == 1 ? '微信在线充值余额' : status == 2 ? '微信线下扫码充值' : status == 3 ? '支付宝线下充值余额' : status == 4
            ? '现金充值余额' : status == 5 ? 'pos机充值余额' : status == 6 ? '微信在线扫码充值余额' : status == 7 ? '支付宝在线扫码充值余额'
              : status == 8 ? '微信在线购买商品' : status == 9 ? '余额购买商品' : status == 10 ? '微信在线购买套餐卡' : status == 11 ? '余额购买套餐卡'
                : status == 12 ? '微信线下购买套餐卡' : status == 13 ? '支付宝线下购买套餐卡' : status == 14 ? '现金购买套餐卡' : status == 15 ? 'pos购买套餐卡'
                  : status == 16 ? '微信在线扫码购买套餐卡' : status == 17 ? '支付宝在线扫码购买套餐卡' : status == 18 ? '微信在线购买商品退款' : status == 19 ? '余额购买商品退款'
                    : status == 20 ? '手动操作余额' : status == 21 ? '余额线下消费' : status == 22 ? '微信线下消费' : status == 23 ? '支付宝线下消费' : status == 24 ? '现金线下消费' : status == 25 ?
                      'pos线下消费' : status == 26 ? '微信在线消费' : '支付宝在线消费';
        return orderStatus;
      };
    },

  },
  watch: {
    drawerEditBoolenss (visible) {
      if (visible) {
        console.log(this.data);

        if (this.data) {
          // this.$util.assignObject(this.form, {
          //   ...this.data
          // });
          this.form = this.data;
          console.log(this.form);
          this.isUpdate = true;
          this.reload();
        } else {
          this.isUpdate = false;
        }
      }
    }
  }
};
</script>
  
  <style lang="less" scoped>
/*隐藏input（type=number)右边的小箭头*/
/deep/.delInput input::-webkit-outer-spin-button,
/deep/.delInput input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/.delInput input[type='number'] {
  -moz-appearance: textfield;
}
.foodsDiv div {
  margin-left: 20px;
  margin-top: 10px;
}
.height83 {
  height: 83vh;
}
.hLabel {
  margin: 10px 0 20px;
  font-weight: 700;
  &::before {
    content: '';
    display: inline-block;
    vertical-align: top;

    margin-right: 5px;
    height: 23px;
    width: 6px;
    background-color: #1e6ceb;
  }
}
.drawer__footer {
  display: flex;
  justify-content: flex-start;
  margin-left: 15px;
}
</style>
  